<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 图片库管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>图片管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="el-icon-content"
           v-for="item in imglist"
           :key="item.length">
        <!-- 直接链接到详情展示页面 -->
        <router-link to="/PhotoDetails"
                     tag="div">
          <span class="iconfont file">&#xe78b;</span>
          <h5 class="item-name">{{item.name}}</h5>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PhotoDatabase",
  data: function () {
    return {
      formdata: {
        type: 4,
      },
      imglist: ['']
    }
  },
  methods: {
    getResourcesName: function (formdata) {

      this.$axios.get("/pub/resource/getResourcesName", {
        params: {
          type: this.formdata.type,
        }
      }).then((response) => {
        if (response.data.data != null) {
          this.imglist = response.data.data;
          const length = response.data.data.length;
        } else {
          console.log("失败")
        }
      });
    },
  },
  mounted () {
    this.getResourcesName();
  }
}
</script>

<style scoped>
.file {
  color: rgb(255, 209, 109);
  font-size: 60px;
}
.el-icon-content {
  width: 19%;
  cursor: pointer;
  text-align: center;
  margin-bottom: 40px;
}
.item-name {
  margin-top: 10px;
  margin-left: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>